<template>
    <div id="app">
      <el-icon><Plus /></el-icon>
       <el-button type="danger" :icon="Delete" circle />
      <el-button type="primary">Primary</el-button>
      <p>{{shengri}}</p>
      <input type="text" v-model="name">
      <h1>{{num2}}</h1>
     <h1>{{ title }}</h1>
     <button @click="fn()">更新</button>
     <button>隐藏</button>
     <IndexView>
      <template v-slot:page>
        <p>111111111</p>
        <p>222222222</p>
      </template>
      <template v-slot:game><!--插槽传递内容-->
        <h1>游戏1</h1>
        <h1>游戏2</h1>
      </template>
     </IndexView>
    </div>
</template>
<script>
import IndexView from "@/components/IndexView.vue"//引入组件
import { computed, inject, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated,ref } from 'vue';
export default {
  components:{
    IndexView,//注册组件
  },
  setup(){
    let data = inject("age")//接收
    console.log(data);
    
    let is = ref(true)
    let title = ref("11111")
    function fn(){
       title.value = "2222"
    }
    onBeforeMount(()=>{
       console.log("挂载前");
    })
    onMounted(()=>{
      console.log("挂载后");
    })
    onBeforeUpdate(()=>{
        console.log("更新前");
    })
    onUpdated(()=>{
        console.log("更新后");
    })
    onBeforeUnmount(()=>{
        console.log("销毁前");
    })
    onUnmounted(()=>{
        console.log("销毁后");
    })
    let num = ref(1)
    let num2 = computed(()=>{
    return  num.value * 2
    })
    let shengri = ref("2007")
    let date = new Date().getFullYear()
    let name = computed({
      get(){//只读
        return date - shengri.value
      },
      set(value){//可写
           console.log(value);
           shengri.value = date - value
      }
    })
    return {fn,title,num2,name,shengri}
  }
}
</script>
<style>
</style>
